@charset "utf-8";


$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}

.web_school_content{
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transform: translateX(-100%);
    transition: all .5s linear;
    background: #fff;
    overflow: hidden;
    .content{
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        width: 100%;
//      height: 100%;
//      background: skyblue;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
    }
    .content_menu{
        width: r(580px);
        margin: 0 auto;
        padding-top: r(28px);
        h6{
            color: #5c5856;
            font-size: 16px;
            font-weight: bolder;
        }
        .time_place{
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            color: #8b8b8b;
            border-bottom: r(1px) solid #d2d2d2;
            margin-bottom: r(16px);
        }
        .img_wrap_sc{
            height: r(280px);
            width: 100%;
            overflow: hidden;
            margin-bottom: r(28px);
            img{
                width: 100%;
            }
        }
        .character{
            width: 100%;
            overflow: hidden;
            white-space: wrap;
            line-height: r(30px);
            font-size: 12px;
            color: #8b8b8b;
            p{
                margin-bottom: r(28px);
            }
            .active_menu{
                margin-bottom: r(28px);
            }
        }
    }
    .segment_line{
        height: r(25px);
        width: 100%;
        background: #f5f5f5;
    }
    .time_and_place{
        width: r(580px);
        margin: 0 auto;
        padding: r(15px) 0;
        h6{
            color: #5c5856;
            font-size: 16px;
        }
        p{
            font-size: 14px;
            line-height: r(34px);
            color: #727171;
            &:first-of-type{
                &::before{
                    content: "\e63d";
                    font-weight: bold;
                    color: #b90b10;
                }
            }
            &:nth-of-type(2){
                &::before{
                    content: "\e62c";
                    font-weight: bold;
                    color: #b90b10;
                }
            }
        }
    }
    .overview{
        width: r(590px);
        margin: 0 auto;
        padding: r(15px) 0;
        h6{
            color: #5c5856;
            font-size: 16px;
            margin-bottom: r(10px);
        }
        .teacher_message{
            display: inline-block;
            vertical-align: middle;
            margin-right: r(10px);
            font-size: 0;
            .head_portrait{
                width: r(77px);
                height: r(77px);
                margin-right: r(5px);
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;
                }
            }
            .message{
                height: r(87px);
                width: r(90px);
                display: inline-block;
                vertical-align: middle;
                font-size: 0;
                line-height: r(24px);
                padding: r(8px) 0;
                p{
                    font-size: 12px;
                    color: #727171;
                    &:first-of-type{
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 12px;
                        transform: scale(0.9666);
                        transform-origin: left top;
                        white-space: nowrap;
                    }
                    &:nth-of-type(2){
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 12px;
                        transform: scale(0.7666);
                        transform-origin: left top;
                        white-space: nowrap;
                    }
                    &:nth-of-type(3){
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 12px;
                        transform: scale(0.7666);
                        transform-origin: left top;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    .btn_precontract{
        width: r(590px);
        margin: r(15px) auto r(15px) auto;
        height: r(86px);
        background: #b20000;
        font-size: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        &>span{
            font-size: 14px;
            color: #fff;
            line-height: r(25px);
            vertical-align: middle;
            margin-right: r(13px);
        }
        .img_wrap_btn{
            display: inline-block;
            vertical-align: middle;
            width: r(25px);
            height: r(25px);
            overflow: hidden;
            img{
                width: 100%;
            }
        }
    }
}
.school_content_open{
    opacity: 1;
    transform: translateX(0);
}
